<template>
  <div class="shop">

    <el-table :data="tableData"
      style="width:100%;margin:20px 0;"
      max-height="680"

      :header-cell-style="tccolor"
      border>

    <el-table-column label="地区"  width="80">
      <template slot-scope="scope">
        <p style="text-align:center">{{scope.row.name}}</p>
      </template>
    </el-table-column>
    <el-table-column label="省份">
      <template slot-scope="scope">
        <div v-for='(item,index) in scope.row.areas' :key="'p'+index" style='float:left;margin-right:12px;'>
           <el-button size="mini" type="primary" @click="goToCityDetail(scope.row.areas[index].id,scope.row.areas[index].name)" v-if="scope.row.areas[index].is_have_partner">{{scope.row.areas[index].name}}</el-button>
        <el-button size="mini" type="danager"  v-else>{{scope.row.areas[index].name}}</el-button>
        </div>

      </template>
    </el-table-column>
    </el-table>
  </div>
</template>


<script>
// import {providerRegionProvinceList} from '@/api/service.js'
export default {
  data(){
    return{
       tableData:[]
    }
  },
  mounted (){
     this.getproviderRegionProvinceListData()
  },
  methods:{

    goToCityDetail(id,name){
      this.$router.push({
        path:'./ispAreaDetailInfo',
        query:{
          region_id:id,
          name:name
        }
      })

    },
    async getproviderRegionProvinceListData(){
       let res  = await  providerRegionProvinceList()
       if(res.code === 10000){
         this.tableData =  res.data
       }else{
         this.$message.error(res.message)
       }
    },
    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center; font-size:14px;";
    },
  }
}
</script>

<style lang="scss" scoped>
.shop{
  padding: 20px;

}
</style>
